<template>
    <div>
        <el-dialog
            :title="$t('device-edit-install-2')"
            :visible="visibleEdit2"
            class="el-dialog-sm"
            @close="()=>{$store.commit('setVisibleEdit2',false)}">
            <el-form ref="form" :model="form" label-width="200px" >
                <el-row :gutter="24">
                    <el-col :span="20">
                        <el-form-item :label="$t('device-install-page-num')" prop="subStep" :rules="[{ required: form.type=='0'?true:false, message: $t('index_js_notNull')}]">
                            <el-input-number v-model="form.subStep" controls-position="right" placeholder="" :min="1"></el-input-number>
                        </el-form-item>
                        <el-form-item :label="$t('device-install-content')">
                            <el-input type="textarea" v-model="form.description" placeholder=""></el-input>
                        </el-form-item>
                        <el-form-item :label="$t('device-install-img')" prop="file">
                            <baseFile v-model="form.file" :placeholder="fileName"></baseFile>
                            <img class="preview-img" :src="returnUrl(imgBaseUrl)" width="260px" height="auto"/>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="()=>{$store.commit('setVisibleEdit2',false)}">{{$t('cancel')}}</el-button>
                <el-button type="primary" @click="save('form')">{{$t('save')}}</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import baseFile from '../../../components/common/baseFileInput'
export default {
    components:{
        baseFile
    },
    props: {
        snGuideId:'',
        snGuideStepId:'',
        editSubStepData:''
    },
    data() {
        return {
            form:{
                id:'',
                snGuideId:'',
                snGuideStepId:'',
                subStep:'',
                description:'',
                file:'1'
            },
            imgBaseUrl:'',
            fileName:''
        };
    },
    computed: {
        visibleEdit2(){
            return this.$store.state.sysStore.visibleEdit2
        }
    },
    watch:{
        editSubStepData:{
            handler(nv,ov){
                console.log(nv)
                if(nv){
                    for(let key in this.form){
                        this.form[key]=nv[key]
                    }
                    this.form.id=nv.sid
                    this.fileName=nv.picturePath.split("/").slice(-1)[0]
                    
                    this.imgBaseUrl=nv.picturePath
                }
            }
        }
    },
    mounted(){
      
    },
    methods: {
        save(formName){
            this.$refs[formName].validate((valid) => {
              if (valid) {
                this.commitForm()
              } else {
                console.log('error submit!!');
                return false;
              }
            });
        },
        async commitForm(){
            this.form.snGuideId=this.snGuideId
            this.form.snGuideStepId=this.snGuideStepId
            let res = await this.API.editSubSteps(this.form)
            if(res.success){
                this.$message.success(this.$t('index.control_success'));
            }else{
                this.$message.error(this.$t('index.control_fail'));
            }
            this.$store.commit('setVisibleEdit2',false)
            this.$emit('uploadPage',true)
        },
        returnUrl(url){
            let str = ''
            if(process.env.NODE_ENV == 'development'){
                str = '/phoebus/snGuideStep/previewPicture?picturePath='+url
            }else{
                str = '/snGuideStep/previewPicture?picturePath='+url
            }
            return str
        }
    }
};
</script>

<style  lang="less">
</style>
